<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-31 08:46:17
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-22 17:57:10
 * @FilePath: /vue3-uniapp/src/components/ui/MescrollView/MescrollView.vue
-->
<script lang="ts" setup>
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
// import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
import { getStaticImage } from '@/utils/index';
import { useAppStore } from '@/store';

import { useNetwork } from './useNetwork';
const { isConnected, getNetworkType } = useNetwork();

const { cssVarObject } = storeToRefs(useAppStore());

const props = withDefaults(
    defineProps<{
        canDown?: boolean;
        canUp?: boolean;
        emptyText?: string;
        height: string;
    }>(),
    {
        canDown: false,
        canUp: false,
        emptyText: '暂无内容'
    }
);

const emits = defineEmits<{
    (event: 'init', instance: typeof viewInstance): void;
    (event: 'down', instance: typeof viewInstance): void;
    (event: 'up', instance: typeof viewInstance): void;
    (event: 'update:loading', value: boolean): void;
}>();

const { canDown, canUp, emptyText, height } = toRefs(props);

const isLoading = ref(true);
const isComplete = ref(false);
const isError = ref(false);
const isEmpty = ref(false);
const isInit = ref(false);
const mescrollRef = ref<any>();
let mescrollInstance: any;

const downOption = computed(() => {
    return {
        auto: false,
        lock: true,
        use: canDown.value
    };
});
const upOption = computed(() => {
    return {
        auto: false,
        lock: true,
        empty: {
            use: false
        },
        use: canUp.value
    };
});

const viewInstance = {
    /**
     * 成功后隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
     * @param page 当前页，无页数（dataSize、pageSize、totalSize同理）不需要传，比如非列表页详情页
     * @param pageSize 每页大小
     * @param totalSize 总页数
     * @param dataSize 当前从网络请求获取的数据
     */
    endSuccess(
        page?: number,
        pageSize?: number,
        dataSize?: number,
        totalSize?: number
    ) {
        if (page && pageSize && totalSize && dataSize) {
            mescrollInstance.setPageSize(pageSize);
            mescrollInstance.setPageNum(page);
            mescrollInstance.endBySize(dataSize, totalSize);
        }
        isLoading.value = false;
        if (page === 1 && dataSize === 0) {
            isEmpty.value = true;
        } else {
            isComplete.value = true;
        }
        isError.value = false;
    },
    /**
     * 失败后隐藏下拉刷新和上拉加载的状态, 在联网获取数据失败后调用
     */
    endErr() {
        isLoading.value = false;
        isEmpty.value = false;
        isComplete.value = false;
        isError.value = true;
        mescrollInstance.endErr();
    }
};

const mescrollInit = (mescroll: any) => {
    mescrollInstance = mescroll;
    if (!mescrollInstance || !mescrollInstance.resetUpScroll) {
        if (mescrollRef.value) {
            mescrollInstance = mescrollRef.value.mescroll;
        }
    }
    if (isConnected.value) {
        mescrollInstance.lockDownScroll(false);
        mescrollInstance.lockUpScroll(false);
    }
    emits('init', viewInstance);
};

watch(
    () => isConnected.value,
    (newVal) => {
        if (newVal) {
            mescrollInstance?.lockDownScroll(false);
            mescrollInstance?.lockUpScroll(false);
        } else {
            mescrollInstance?.lockDownScroll(true);
            mescrollInstance?.lockUpScroll(true);
        }
    }
);
</script>

<template>
    <view class="mescrollview-container">
        <MescrollUni
            ref="mescrollRef"
            @init="mescrollInit"
            @down="() => emits('down', viewInstance)"
            @up="() => emits('up', viewInstance)"
            :down="downOption"
            :up="upOption"
            :bottombar="false"
            :fixed="false"
            :height="height"
        >
            <view class="page-status-container">
                <!-- 加载中 -->
                <view class="loading-box" v-if="isLoading && isConnected">
                    <TnLoading
                        show
                        animation
                        mode="flower"
                        :color="cssVarObject['--c-primary']"
                        :size="'xl'"
                    />
                    <view class="c-primary text-sm mt-[20rpx]">加载中...</view>
                </view>
                <!-- 出错了 -->
                <view
                    v-else-if="isError && isConnected"
                    class="flex flex-row items-center justify-center c-text1 text-base mt-[20rpx]"
                >
                    服务器错误，请刷新~
                </view>
                <!-- 暂无内容 -->
                <view
                    v-else-if="isEmpty && isConnected"
                    class="flex flex-col items-center"
                    style="padding-top: 240rpx"
                >
                    <view class="mb-[40rpx]">
                        <image
                            :src="getStaticImage(`/no_content.png`)"
                            style="width: 240rpx; height: 200rpx"
                        />
                    </view>
                    <view
                        class="flex flex-row items-center justify-between c-text text-sm"
                        >{{ emptyText }}</view
                    >
                </view>
                <!-- 完成 -->
                <view v-else-if="isComplete && isConnected">
                    <slot></slot>
                </view>
                <!-- 无网络 -->
                <view class="network-box" v-else>
                    <TnIcon
                        name="empty-network"
                        :color="cssVarObject['--c-text']"
                        :size="'120rpx'"
                    />
                    <view class="c-text text-sm mt-[30rpx] mb-[20rpx]"
                        >暂无网络</view
                    >
                    <TnButton
                        @click="getNetworkType"
                        :bg-color="cssVarObject['--c-primary']"
                        :size="'lg'"
                    >
                        <text class="c-white text-sm">重试</text>
                    </TnButton>
                </view>
            </view>
        </MescrollUni>
    </view>
</template>
<style lang="scss" scoped>
.mescrollview-container {
    .page-status-container {
        .loading-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 200rpx;
        }
        .network-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 200rpx;
        }
    }
}
</style>
